<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram Reproduction</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="650" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '20px "Times New Roman"';

        // Coordinates
        const y_center = 200;
        const R = 50; // a_y radius of ellipse
        const r = 15; // a_x radius of ellipse
        const x_start = 150;
        const length = 400;
        const x_L = x_start + length / 2;
        const x_end = x_start + length;

        // Draw the cylinder outline (solid lines)
        ctx.beginPath();
        ctx.moveTo(x_start, y_center - R);
        ctx.lineTo(x_end, y_center - R);
        ctx.moveTo(x_start, y_center + R);
        ctx.lineTo(x_end, y_center + R);
        ctx.stroke();

        ctx.beginPath();
        ctx.ellipse(x_end, y_center, r, R, 0, 0, 2 * Math.PI);
        ctx.stroke();
        
        // Use a solid line for the front part of the left cap
        ctx.beginPath();
        ctx.ellipse(x_start, y_center, r, R, 0, -Math.PI/2, Math.PI/2);
        ctx.stroke();
        // and a dashed line for the back, as implied by the S cross-section
        ctx.beginPath();
        ctx.save();
        ctx.setLineDash([5, 5]);
        ctx.ellipse(x_start, y_center, r, R, 0, Math.PI/2, 3*Math.PI/2);
        ctx.stroke();
        ctx.restore();


        // Draw dashed cross-sections
        ctx.save();
        ctx.setLineDash([5, 5]);
        ctx.lineWidth = 1.5;

        // Dashed ellipse at x=L
        ctx.beginPath();
        ctx.ellipse(x_L, y_center, r, R, 0, 0, 2 * Math.PI);
        ctx.stroke();
        
        // Dashed ellipse at x=O for S
        ctx.beginPath();
        ctx.ellipse(x_start, y_center, r, R, 0, 0, 2 * Math.PI);
        ctx.stroke();
        
        ctx.restore();


        // Draw x-axis
        const y_axis = y_center + 100;
        ctx.beginPath();
        ctx.moveTo(x_start - 20, y_axis);
        ctx.lineTo(x_end + 50, y_axis);
        ctx.stroke();
        // Arrow head for x-axis
        ctx.beginPath();
        ctx.moveTo(x_end + 50, y_axis);
        ctx.lineTo(x_end + 40, y_axis - 5);
        ctx.moveTo(x_end + 50, y_axis);
        ctx.lineTo(x_end + 40, y_axis + 5);
        ctx.stroke();

        // Axis Labels
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('O', x_start, y_axis + 5);
        ctx.fillText('L', x_L, y_axis + 5);
        ctx.fillText('2L', x_end, y_axis + 5);
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText('x', x_end + 55, y_axis);

        // Draw current I
        const y_I = y_center;
        // Left current arrow
        ctx.beginPath();
        ctx.moveTo(x_start - 70, y_I);
        ctx.lineTo(x_start - 20, y_I);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(x_start - 20, y_I);
        ctx.lineTo(x_start - 30, y_I - 5);
        ctx.moveTo(x_start - 20, y_I);
        ctx.lineTo(x_start - 30, y_I + 5);
        ctx.stroke();
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('I', x_start - 60, y_I - 5);

        // Right current arrow
        ctx.beginPath();
        ctx.moveTo(x_end + 20, y_I);
        ctx.lineTo(x_end + 70, y_I);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(x_end + 70, y_I);
        ctx.lineTo(x_end + 60, y_I - 5);
        ctx.moveTo(x_end + 70, y_I);
        ctx.lineTo(x_end + 60, y_I + 5);
        ctx.stroke();
        ctx.textBaseline = 'middle';
        ctx.textAlign = 'left';
        ctx.fillText('I', x_end + 25, y_I);


        // Draw voltage ΔU dimension line
        const y_U = y_center - 100;
        ctx.beginPath();
        // Ticks
        ctx.moveTo(x_start, y_U - 10);
        ctx.lineTo(x_start, y_U + 10);
        ctx.moveTo(x_end, y_U - 10);
        ctx.lineTo(x_end, y_U + 10);
        // Horizontal line with arrows
        ctx.moveTo(x_start, y_U);
        ctx.lineTo(x_end, y_U);
        // Arrow heads
        ctx.moveTo(x_start + 10, y_U - 5);
        ctx.lineTo(x_start, y_U);
        ctx.lineTo(x_start + 10, y_U + 5);
        ctx.moveTo(x_end - 10, y_U - 5);
        ctx.lineTo(x_end, y_U);
        ctx.lineTo(x_end - 10, y_U + 5);
        ctx.stroke();
        
        // Labels S and ΔU
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('ΔU', x_L, y_U - 5);
        
        ctx.textBaseline = 'middle';
        ctx.textAlign = 'left';
        ctx.fillText('S', x_start + r + 5, y_center - R + 10);

        // Figure Caption
        ctx.font = '24px "SimSun", "STSong"';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('电图 4.2.1', canvas.width / 2, canvas.height - 10);

    </script>
</body>
</html>